<div ng-controller="LayoutCtrl" class="layout-content layout-options" ng-cloak>

  <docs-demo demo-title="Responsive Layout" class="small-demo colorNested">
    <demo-file name="index.html">
      <div layout="row" layout-sm="column">
        <div flex>
          I'm above on mobile, and to the left on larger devices.
        </div>
        <div flex>
          I'm below on mobile, and to the right on larger devices.
        </div>
      </div>
    </demo-file>
  </docs-demo>

  <p>
    See the <a href="layout/container">Container Elements</a> page for a basic explanation
    of layout directives.
    <br/>
    To make your layout change depending upon the device screen size, there are
    other <code>layout</code> directives available:
  </p>

  <table class="md-api-table">
    <thead>
    <tr>
      <th>API</th>
      <th>Activates when device</th>
    </tr>
    </thead>
    <tr>
      <td>layout</td>
      <td>Sets default layout direction unless overridden by another breakpoint.</td>
    </tr>
    <tr>
      <td>layout-xs</td>
      <td>width &lt; <b>600</b>px</td>
    </tr>
    <tr>
      <td>layout-gt-xs</td>
      <td>width &gt;= <b>600</b>px</td>
    </tr>
    <tr>
      <td>layout-sm</td>
      <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
    </tr>
    <tr>
      <td>layout-gt-sm</td>
      <td>width &gt;= <b>960</b>px</td>
    </tr>
    <tr>
      <td>layout-md</td>
      <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
    </tr>
    <tr>
      <td>layout-gt-md</td>
      <td>width &gt;= <b>1280</b>px</td>
    </tr>
    <tr>
      <td>layout-lg</td>
      <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
    </tr>
    <tr>
      <td>layout-gt-lg</td>
      <td>width &gt;= <b>1920</b>px</td>
    </tr>
    <tr>
      <td>layout-xl</td>
      <td>width &gt;= <b>1920</b>px</td>
    </tr>
  </table>
  <br/>

  <br/>
  <hr>
  <br/>

  <h3>Layout Margin, Padding, Wrap and Fill</h3>
  <br/>


  <docs-demo demo-title="Layout Margin, Padding, and Fill" class="small-demo colorNested-noPad">
    <demo-file name="index.html">
      <div layout="row" layout-margin>
        <div flex>Parent layout and this element have margins.</div>
      </div>
      <div layout="row" layout-padding>
        <div flex>Parent layout and this element have padding.</div>
      </div>
      <div layout="row" layout-fill style="min-height: 224px;">
        <div flex>Parent layout is set to fill available space.</div>
      </div>
      <div layout="row" layout-padding layout-margin layout-fill style="min-height: 224px;">
        <div flex>I am using all three at once.</div>
      </div>
    </demo-file>
  </docs-demo>

  <p>
    <code>layout-margin</code> adds margin around each <code>flex</code> child. It also adds a margin to the layout
    container itself.
    <br/>
    <code>layout-padding</code> adds padding inside each <code>flex</code> child. It also adds padding to the layout
    container itself.
    <br/>
    <code>layout-fill</code> forces the layout element to fill its parent container.
  </p>


  <p>Here is a non-trivial group of <code>flex</code> elements using <code>layout-wrap</code></p>

  <docs-demo demo-title="Wrap" class="small-demo colorNested-noPad">
    <demo-file name="index.html">
      <div layout="row" layout-wrap>
        <div flex="33">[flex=33]</div>
        <div flex="66">[flex=66]</div>
        <div flex="66">[flex=66]</div>
        <div flex="33">[flex=33]</div>
        <div flex="33">[flex=33]</div>
        <div flex="33">[flex=33]</div>
        <div flex="33">[flex=33]</div>
      </div>
    </demo-file>
  </docs-demo>

  <p>
    <code>layout-wrap</code> allows <code>flex</code> children to wrap within the container if the elements use more
    than 100%.
    <br/>
  </p>

  <br/>

  <br/>
    <hr>
    <br/>

    <h3>Show &amp; Hide </h3>

  <p>Use the <code>show</code> <code>hide</code> APIs to responsively show or hide elements. While these work similar
  to <code>ng-show</code> and <code>ng-hide</code>, these AngularJS Material Layout directives are mediaQuery-aware.
  </p>

  <docs-demo demo-title="Hide and Show Directives" class="small-demo colorNested">
    <demo-file name="index.html">
      <div layout="row">
        <div hide show-gt-sm flex>
          Only show on gt-sm devices.
        </div>
        <div hide-gt-sm flex>
          Shown on small and medium.<br/>
          Hidden on gt-sm devices.
        </div>
        <div show hide-gt-md flex>
          Shown on small and medium size devices.<br/>
          Hidden on gt-md devices.
        </div>
        <div hide show-md flex>
          Shown on medium size devices only.
        </div>
        <div hide show-gt-lg flex>
          Shown on devices larger than 1200px wide only.
        </div>
      </div>
    </demo-file>
  </docs-demo>
  <br/>
  <table class="md-api-table">
    <thead>
      <tr>
        <th>hide (display: none)</th>
        <th>show (negates hide)</th>
        <th>Activates when:</th>
      </tr>
    </thead>
    <tr>
      <td>hide-xs</td>
      <td>show-xs</td>
      <td>width &lt; <b>600</b>px</td>
    </tr>
    <tr>
      <td>hide-gt-xs</td>
      <td>show-gt-xs</td>
      <td>width &gt;= <b>600</b>px</td>
    </tr>
    <tr>
      <td>hide-sm</td>
      <td>show-sm</td>
      <td><b>600</b>px &lt;= width &lt; <b>960</b>px</td>
    </tr>
    <tr>
      <td>hide-gt-sm</td>
      <td>show-gt-sm</td>
      <td>width &gt;= <b>960</b>px</td>
    </tr>
    <tr>
      <td>hide-md</td>
      <td>show-md</td>
      <td><b>960</b>px &lt;= width &lt; <b>1280</b>px</td>
    </tr>
    <tr>
      <td>hide-gt-md</td>
      <td>show-gt-md</td>
      <td>width &gt;= <b>1280</b>px</td>
    </tr>
    <tr>
      <td>hide-lg</td>
      <td>show-lg</td>
      <td><b>1280</b>px &lt;= width &lt; <b>1920</b>px</td>
    </tr>
    <tr>
      <td>hide-gt-lg</td>
      <td>show-gt-lg</td>
      <td>width &gt;= <b>1920</b>px</td>
    </tr>
    <tr>
      <td>hide-xl</td>
      <td>show-xl</td>
      <td>width &gt;= <b>1920</b>px</td>
    </tr>
  </table>


</div>
